<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // Promise实例的链式操作 => 原理Promise对象的then() catch() finally() 返回值都是Promise实例 => 后面可以继续接then方法()

    // Promise实例的链式操作
    //  1. Promise实例的then方法,不接受成功或失败的回调函数 => Promise实例的状态和存储的数据将继续向后传递
    //  2. Promise实例的then方法只指定成功时的回调函数,catch()指定失败的回调函数
    //  a. 如果回调函数返回值是非Promsie实例(基本数据) => 后续的回调函数会接收前面回调函数返回的结果,如果回调函数在执行过程中出现错误,错误的状态和数据将会继续想回传递,最终会被catch捕获 
    //     catch会捕获整个链式操作过程中的所有错误

    // 成功的链式传递
   /*  var p = new Promise(function(resolve,reject){
        // 回调函数 -> 容器 -> 用来存放异步操作 (根据异步操作的结果改变状态)
        setTimeout(()=>{
            resolve(1); // {<fulfilled>:1}
            console.log(p); 
        },2000);
    })
    console.log(p); // {<pending>:undefined}

    // p(pending)  => 2s (fulfilled)
    p.then(function(arg){ // 1
        console.log("fulfilled",arg);
        return 2;
    }).then(function(arg){ // 2
        console.log("fulfilled",arg);
        return 3;
    }).then(function(arg){ // 3
        console.log("fulfilled",arg);
        return 4;
    }).then(function(arg){ // 4
        console.log("fulfilled",arg);
    }).catch(function(arg){
        console.log("rejected",arg);
    }) */

    /* 中途失败的链式传递 */
    var p = new Promise(function(resolve,reject){
        // 回调函数 -> 容器 -> 用来存放异步操作 (根据异步操作的结果改变状态)
        setTimeout(()=>{
            resolve(1); // {<fulfilled>:1}
            console.log(p); 
        },2000);
    })
    console.log(p); // {<pending>:undefined}

    // p(pending)  => 2s (fulfilled)
    p.then(function(arg){ // 1
        console.log("fulfilled",arg);
        // aaaa; // 报错: aaaa is not defined
        return 2;
    }).then(function(arg){ // 2
        console.log("fulfilled",arg);
        aaaa; // 报错: aaaa is not defined
        return 3;
    }).then(function(arg){ // 3
        console.log("fulfilled",arg);
        return 4;
    }).then(function(arg){ // 4
        console.log("fulfilled",arg);
    }).catch(function(arg){
        console.log("rejected",arg);
    })

   

</script>
</html>